<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.sidebar{
				width: 190px;
				position: relative;
			}
			.sidebar ul{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.sidebar ul li{
				line-height: 32px;
				text-align: center;
				background-color: greenyellow;
			}
			.sidebar ul li .active{
				background-color: deeppink;
			}
			.sidebar ul li a{
				text-decoration: none;
				color: #666;
			}
			.siadebar .list{
				width: 300px;
				height: 340px;
				position: absolute;
				top: 0;
				left: 190px;
			}
			.siadebar .list .item{
				width: inherit;
				height: inherit;
				display: none;
				
			}
			.siadebar .list .item .active{
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="sidebar">
			<ul>
				<li><a href="#">手机</a></li>
				<li><a href="#">手机</a></li>
				<li><a href="#">手机</a></li>
				<li><a href="#">手机</a></li>
				<li><a href="#">手机</a></li>
				<li><a href="#">手机</a></li>
				<li><a href="#">手机</a></li>
				<li><a href="#">手机</a></li>
				<li><a href="#">手机</a></li>
				<li><a href="#">手机</a></li>
			</ul>
			<div class="list">
				<div class="item item-1" style="background-color: red;"></div>
				<div class="item item-2" style="background-color: green;"></div>
				<div class="item item-3" style="background-color: blue;"></div>
				<div class="item item-4" style="background-color: orange;"></div>
			</div>
		</div>
		
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
		<script type="text/javascript">
			$(".sidebar ul li").hover(function(){
				index = $(this).index();
				$(".sidebar ul li").removeClass("active").eq(index).addClass("active");
				$(".sidebar .list .item").removeClass("active").eq(index).addClass("active");
			})
			
			
			
		</script>
		
	</body>
</html>
